<#include "/classic/inc/layout.ftl"/>
<@layout "修改用户信息">

<div class="panel panel-default stacked">
	<div class="panel-heading">
		<ul class="nav nav-pills account-tab">
			<li><a href="profile">基本信息</a></li>
            <li><a href="email">修改邮箱</a></li>
			<li class="active"><a href="avatar">修改头像</a></li>
			<li><a href="password">修改密码</a></li>
		</ul>
	</div>
	<div class="panel-body">
		<div id="message">
			<#include "/classic/inc/action_message.ftl"/>
		</div>
			<#--<div class="upload-btn head-img">
				<label>
					<span>点击选择一张图片</span>
                    <!-- 显示图片的容器 &ndash;&gt;
					<input id="upload_btn" type="file" name="file" accept="image/*" title="点击添加图片">
				</label>
			</div>-->
			<div class="update_ava" id="up-img-touch">
				<img class="am-circle" src="<@resource src=profile.avatar/>" id="target" alt="[Example]" data-am-popover="{content: '点击上传', trigger: 'hover focus'}"/>
			</div>
            <div><a style="text-align: center; display: block;"  id="pic"></a></div>

            <!--图片上传框-->
            <div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1">
                <div class="am-modal-dialog up-frame-parent up-frame-radius">
                    <div class="am-modal-hd up-frame-header">
                        <label>修改头像</label>
                        <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                    </div>
                    <div class="am-modal-bd  up-frame-body">
                        <div class="am-g am-fl">
                            <div class="am-form-group am-form-file">
                                <div class="am-fl">
                                    <button type="button" class="am-btn am-btn-default am-btn-sm">
                                        <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
                                </div>
                                <input type="file" id="inputImage">
                            </div>
                        </div>
                        <div class="am-g am-fl" >
                            <div class="up-pre-before up-frame-radius">
                                <img alt="" src="" id="image" >
                            </div>
                            <div class="up-pre-after up-frame-radius">
                            </div>
                        </div>
                        <div class="am-g am-fl">
                            <div class="up-control-btns">
                                <span class="am-icon-rotate-left"  onclick="rotateimgleft()"></span>
                                <span class="am-icon-rotate-right" onClick="rotateimgright()"></span>
                                <span class="am-icon-check" id="up-btn-ok"></span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!--加载框-->
            <div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
                <div class="am-modal-dialog">
                    <div class="am-modal-hd">正在上传...</div>
                    <div class="am-modal-bd">
                        <span class="am-icon-spinner am-icon-spin"></span>
                    </div>
                </div>
            </div>
	</div><!-- /panel-content -->
</div><!-- /panel -->

<script type="text/javascript">
    seajs.use('avatar');
</script>
<script type="text/javascript" src="${base}/dist/js/avatar/jquery.min.js"></script>
</@layout>